<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益</el-breadcrumb-item>
        <el-breadcrumb-item>新建自定义权益</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>新建自定义权益</h3>
    </el-card>

    <el-card>
      <el-form ref="elForm" size="medium" label-width="77px">
        <!-- 权益名称 -->
        <el-col :span="20" id="box">
          <el-form-item label="权益名称">
            <el-input v-model="input6" placeholder="请输入单行文本单行文本" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 权益说明 -->
        <el-col :span="20" id="box1">
          <el-form-item label="权益说明">
            <el-input v-model="input7" placeholder="请输入单行文本" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 上传图标 -->
        <el-col>
          <el-form-item label="上传图标" id="box2">
            <el-upload
              class="avatar-uploader"
              action="http://172.16.12.80:8080/vip/uploadImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="img"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <el-upload
            :action="upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :headers="headerObj"
            name="img"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>-->
          </el-form-item>
        </el-col>
        <!-- 权益状态 -->
        <el-col>
          <el-form-item label="权益状态" id="box3">
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item id="box4">
            <el-button @click="add" type="primary">提交</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      input6: "",
      input7: "",
      upload: "",
      headerObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },
      imageUrl: "",
      image: "",
    };
  },
  methods: {
    add() {
      this.$axios({
        url: "/vip/rights/add",
        method: "post",
        data: {
          name: this.input6,
          description: this.input7,
          img: this.image,
          status: this.value ? 1 : 0,
          type: "自定义",
        },
      }).then((res) => {
        console.log(res);

        if (res.data.code == 0) {
          this.$router.push("/home/userRights");
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.image = res.data;
    },
    back() {
      this.$router.push("/home/userRights");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 150 / 150 < 3;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
#box,
#box1,
#box2,
#box3,
#box4 {
  margin-left: 200px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>